<template>
  <div class="mui-content">
    <div class="infoWrapper">
      <div class="info">
        <div class="title mui-text-left">{{detailData.KeyWord}}</div>
        <div class="titleRight mui-text-right"><div class=" mui-text-right">评分:</div> <Star :score=detailData.EvaluatValue></Star></div>
      </div>
      <div class="infoList">
        <div class="listWrapper">
          <div class="listLeft">
            <div>作者：{{detailData.Author}}</div>
            <div>时间：{{detailData.EntryTime}}</div>
            <div>获奖级别：{{detailData.WiningRat}}</div>
            <div>资源类型：{{detailData.ProjectType}}</div>
            <div>学校：{{detailData.WorkUnitName}}</div>
          </div>
          <div class="listRight">
            <div>关键词：{{detailData.KeyWord}}</div>
            <div>资源体系：{{detailData.ResoureSysName}}</div>
            <div>所属活动：{{detailData.ProjectResourceName}}</div>
          </div>
        </div>
      </div>
      <div class="detailWrapper infoList">
        <div class="info"><div class="title mui-text-left" v-text="discrib">内容简介/说明:</div></div>
        <div class="detailText">{{detailData.Introduction}}</div>
      </div>

    </div>
    <Prompt
      title="错误"
      msg="登陆过期,请重新登录"
      confirm="确定"
      v-on:confirm1="confirm1($event)"
      v-if="mistake"
    >
    </Prompt>
  </div>

</template>

<script>
  import Star from '../common/Star'
  import Prompt from '../common/Prompt'
    export default {
        name: "Lesson.vue",
      components:{
          Star,
        Prompt
      },
      props:{
        detailData:{
          type:Object,
          default:{}
        }
      },
      data(){
          return{
            discrib:'内容简介/说明:',
            mistake:false
          }
      },
      created(){
          if(this.detailData.ProjectType.indexOf('论文')>=0){
            this.discrib='论文简介:'
          }else {
            this.discrib="内容简介/说明:"
          }
      }
    }
</script>

<style scoped>
.mui-content .infoWrapper .info{
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: white;
  display: flex;
  padding-left: 2%;
}
.mui-content .infoWrapper .info .title{
  font-size: 1.15rem;
  line-height: 40px;
  height: 40px;
  width: 60%;
  overflow: hidden;
  padding-right: 20px;
  -webkit-line-clamp:1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.mui-content .infoWrapper .info .titleRight{
width: 40%;
  display: flex;
  font-size: 13px;
  color: #717171;
}

.mui-content .infoWrapper .infoList{
  background-color: white;
  padding-bottom: 5px;
}
.mui-content .infoWrapper .infoList .listWrapper{
  padding:0 2%;
  font-size: 12px;
  color: #717171;
  display:flex ;
  width: 100%;
}
.mui-content .infoWrapper .infoList .listLeft{
  width: 50%;
}
.mui-content .infoWrapper .infoList .listRight{
  width: 50%;
}
.mui-content .infoWrapper .detailWrapper{
  background-color: white;
  margin-top: 5px;
  /*padding:5px 5%;*/
}
.mui-content .infoWrapper .detailWrapper .detailText{
  padding: 0 2%;
  color: #717171;
  font-size: 14px;
}
</style>
